<template>
  <view>
    <view class="gradMenuBx">
      <scroll-view class="gradMenuBxScroll" scroll-x>
        <view class="gradMenu" v-for="(item, index) in mode" :key="index">
          <block v-if="item.menu">
            <view class="gradMenuItem  gradmgbt fc" v-for="(menu, chidIndex) in item.menu" :key="chidIndex" @click="changeMenu(chidIndex,menu)">
              <image v-if="menu.icon != ''" :src="menu.icon" mode="heightFix" class="menuNmaeIcon"></image>
              <text class="menuNmae">{{ menu.name }}</text>
            </view>
          </block>
          <block v-else>
            <view class="gradMenuItem fc " :class="(mask==true&&aciveEq == index) ? 'meActive' : ''" @click="changeMenu(index, item)">
              <image v-if="item.icon != ''" :src="item.icon" mode="heightFix" class="menuNmaeIcon"></image>
              <text class="menuNmae">{{ item.name }}</text>
            </view>
          </block>
        </view>
      </scroll-view>
    </view>
    <!-- 滚动菜单  end -->
  </view>
</template>

<script>
  export default {
    props: {
      mode: {
        type: Array,
        default: () => {
          return [];
        }
      },
      mask: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        aciveEq: 0
        // gradMenu: [{
        //     name: '#一起看电影',
        //     icon: ''
        //   }, {
        //     name: '#旧物转让',
        //     icon: ''
        //   },
        //   {
        //     name: '#组局轰趴',
        //     icon: ''
        //   }, {
        //     name: '#一起看电影',
        //     icon: ''
        //   },
        //   {
        //     name: '烘焙',
        //     icon: ''
        //   }, {
        //     name: '主食控',
        //     icon: ''
        //   }
        // ],
        // gradMenu: [
        // 	{ menu: [{ name: '菜谱分类', icon: '' }, { name: '店家私房', icon: '/static/img/page_my_selected.png' }] },
        // 	{ menu: [{ name: '本帮菜', icon: '' }, { name: '晚餐', icon: '/static/img/page_my_selected.png' }] },
        // 	{ menu: [{ name: '烘焙', icon: '' }, { name: '主食控', icon: '' }] },
        // 	{ menu: [{ name: '台州菜谱', icon: '' }, { name: '爱吃肉肉', icon: '' }] },
        // 	{ menu: [{ name: '菜分类', icon: '' }, { name: '本帮菜', icon: '' }] },
        // 	{ menu: [{ name: '菜谱分类', icon: '' }, { name: '店家私房', icon: '/static/img/page_my_selected.png' }] },
        // 	{ menu: [{ name: '本帮菜', icon: '' }, { name: '晚餐', icon: '/static/img/page_my_selected.png' }] },
        // 	{ menu: [{ name: '烘焙', icon: '' }, { name: '主食控', icon: '' }] }
        // ]
      };
    },
    computed: {},
    methods: {
      changeMenu(eq, v) {
        this.aciveEq = eq;
        this.$emit('change', v);
      }
    }
  };
</script>

<style scoped>
  .gradMenuBx {
    overflow: hidden;
    white-space: nowrap;
    margin-left: -26rpx;
  }

  .gradMenuItem {
    padding: 30rpx 40rpx;
    background: linear-gradient(132deg, #FFA55B 0%, #FE492F 100%);
    opacity: 1;
    border-radius: 20rpx;
    margin-left: 30rpx;
    color: #ffffff;
  }

  .gradmgbt {
    margin-bottom: 22rpx;
  }

  .gradMenu {
    display: inline-block;
    padding: 10rpx 0;
  }

  .gradMenuBxScroll {
    height: 100%;
    width: auto;
    overflow: hidden;
  }

  .menuNmae {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
  }

  .menuNmaeIcon {
    height: 30rpx;
    width: 100%;
    margin-right: 10rpx;
  }

  .gradMenu:last-child {
    margin-right: 26rpx;
  }

  .meActive {
    background: linear-gradient(140deg, #ff614c 0%, #ff8e4c 100%) !important;
    color: #ffffff !important;
  }

  /* 滚动菜单  end */
</style>
